{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

<form class="form-horizontal" action="" method="post" name="form">
    {{ ivr.node_name()  }}
    {{ ivr.play_sound('Navigation sound','navigation_sound',sounds_type,sounds_list,true)  }}
    <div class="form-group">
        <label for="form_play_times" class="col-sm-3 control-label no-padding-right">{{ 'attempts times'|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_play_times" name="form[play_times]" class="col-sm-6">
                {% for play_times in play_times %}
                    <option value="{{ play_times }}">
                        {{ play_times }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "attempts times"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div class="form-group">
        <label for="form_timeout" class="col-sm-3 control-label no-padding-right">{{ "Timeout"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_timeout" name="form[timeout]" class="col-sm-6">
                {% for timeout in timeout %}
                    <option value="{{ timeout }}">
                        {{ timeout }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "timeout help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div class="form-group">
        <label for="form_navigation_keys" class="col-sm-3 control-label no-padding-right">{{ "Navigation keys"|trans }}  <font color="red">*</font></label>
        <div class="col-sm-9">
            <select id="form_navigation_keys" name="form[navigation_keys][]" class="chosen-select" multiple="multiple" data-placeholder="{{ 'Please Selected Option'|trans }}">
                {% for key, navigation_key in navigation_keys %}
                    <option value="{{ key }}">
                        {{ navigation_key|trans }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="form_if_enable_multi_keys" class="col-sm-3 control-label no-padding-right">{{ "If enable multi keys"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_enable_multi_keys" name="form[if_enable_multi_keys]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
        </div>
    </div>
    <div id="form_multi_keys_start_div" class="form-group">
        <label for="form_multi_keys_start" class="col-sm-3 control-label no-padding-right">{{ "Multi Start keys"|trans }}  <font color="red">*</font></label>
        <div class="col-sm-9">
            <select id="form_multi_keys_start" name="form[multi_keys_start][]" class="chosen-select" multiple="multiple" data-placeholder="{{ 'Please Selected Option'|trans }}">
                {% for key, navigation_key in navigation_keys %}
                    <option value="{{ key }}">
                        {{ navigation_key|trans }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div id="max_keys_length_div" class="form-group">
        <label for="form_max_keys_length" class="col-sm-3 control-label no-padding-right">{{ 'Multi keys Length'|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <input type="number" id="form_max_keys_length" name="form[max_keys_length]" required="required" class="col-sm-6" value="1">
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{  'max_keys_length help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.play_sound('Error key sound','error_key_sound',sounds_type,sounds_list,false)  }}
    {{ ivr.play_sound('None key sound','none_key_sound',sounds_type,sounds_list,false)  }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
</form>
<script type="application/javascript">
    $('#form_if_enable_multi_keys').on('change', function() {
        fn_if_enable_multi_keys();
    });

    $("#form_navigation_keys,#form_multi_keys_start").on('change',function(){
        var $currentSelect = $(this).attr('id');
        if ($currentSelect == 'form_navigation_keys') {
            var $changeSelect = 'form_multi_keys_start';
        } else {
            var $changeSelect = 'form_navigation_keys';
        }

        var $changeValue = $('#'+$changeSelect).val();

        $("#"+$changeSelect).empty();
        {% for key, navigation_key in navigation_keys %}
        $("#"+$changeSelect).append("<option value='{{ key }}'>{{ navigation_key|trans }}</option>");
        {% endfor %}

        $('#'+$changeSelect).val($changeValue);

        var $currentValue = $('#'+$currentSelect).val();

        if ($currentValue) {
            $.each($currentValue,function(index,value){
                $("#"+$changeSelect+" option[value='"+value+"']").remove();
                $("#"+$changeSelect).trigger("chosen:updated");
            });
        }
    });

    function fn_if_enable_multi_keys(){
        var value = $('#form_if_enable_multi_keys').val();
        var $form_multi_keys_start_div = $("#form_multi_keys_start_div");
        var $max_keys_length_div = $("#max_keys_length_div");

        if (value == 1) {
            $form_multi_keys_start_div.removeClass('hidden');
            $max_keys_length_div.removeClass('hidden');
        } else {
            $form_multi_keys_start_div.addClass('hidden');
            $max_keys_length_div.addClass('hidden');
            $("#form_multi_keys_start").val('');
        }

        handleKeys();
    }

    function handleKeys() {
        var form_multi_keys_start = $("#form_multi_keys_start").val();
        if (form_multi_keys_start) {
            $.each(form_multi_keys_start,function(index,value){
                $("#form_navigation_keys option[value='"+value+"']").remove();
                $("#form_navigation_keys").trigger("chosen:updated");
            });
        }

        var form_navigation_keys = $("#form_navigation_keys").val();

        if (form_navigation_keys) {
            $.each(form_navigation_keys,function(index,value){
                $("#form_multi_keys_start option[value='"+value+"']").remove();
                $("#form_multi_keys_start").trigger("chosen:updated");
            });
        }
    }
</script>
